<template>
	<view class="modal-layer" v-if="isShow">
		<view class="layer" @tap="onClose"></view>
		<view class="share-modal fboxCol Ycenter Xcenter" v-if="bg && code">
			<image class="bg" :src="detail.pic" mode="aspectFill"></image>
			<view class="info fboxCol Ycenter">
				<view class="share fboxRow Xend color-fff">
					<icon class="bksCIcon bks-c-ziyuan23fenxiang font40" @tap="savePic"></icon>
				</view>
				<view class="tit font22 color-fff">备考生友情提示</view>
				<view class="date font30 color-fff">距高考：{{detail.examDate}}</view>
				<view class="day fboxRow color-fff Ystart Xend">{{detail.countdown}}<text class="text font22">天</text>
				</view>
				<view class="surplus font22 color-fff"></view>
				<view class="content fboxCol color-fff font22">
					<view class="signature">{{detail.motto}}</view>
				</view>
				<image class="code" :src="detail.qrcode" mode="aspectFit"></image>
			</view>
			<text class="bksCIcon bks-c-ziyuan34cha font56 color-fff" @tap="onClose"></text>
		</view>
		<view style='width:0px;height:0px;overflow:hidden;'>
			<canvas canvas-id="myCanvas" style='width:443px; height:667px;position:fixed;left:9000px;' class="myCanvas"
				id="myCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false,
			},
			detail: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				bg: '',
				code: '',
			}
		},
		watch: {
			isShow: {
				handler(val) {
					if (val) {

						const {
							pic,
							qrcode
						} = this.detail
						this.getImg(pic, qrcode, (staus) => {
							if (staus) {
								this.drawOn()
							} else {
								wx.showToast({
									title: '打开图片失败',
									icon: 'none',
									duration: 3000
								})
								this.isShow = false
							}
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {},
		methods: {
			getImg(bg, code, callback) {
				const that = this
				const obj = {
					bgTmp: '',
					codeTmp: ''
				}
				wx.getImageInfo({
					src: bg,
					success(res) {
						obj.bgTmp = res.path
						that.bg = res.path
						if (obj.bgTmp && obj.codeTmp) {
							callback(true)
						}
					},
					fail(err) {
						callback(false)
					}
				})
				wx.getImageInfo({
					src: code,
					success(res) {
						that.code = res.path
						obj.codeTmp = res.path
						if (obj.bgTmp && obj.codeTmp) {
							callback(true)
						}
					},
					fail(err) {
						callback(false)
					}
				})
			},
			// 关闭弹窗回调
			onClose() {
				this.$emit('myevent', {
					isShow: false
				})
			},
			drawOn() {
				const screenWidth = 443
				const screenHeight = 667
				const {
					detail: {
						examDate,
						countdown,
						countdownNotWeekend,
						motto
					}
				} = this
				let ctx = wx.createCanvasContext('myCanvas', this)
				ctx.drawImage(this.bg, 0, 0, screenWidth, screenHeight)
				// 字体颜色
				ctx.setFillStyle('#fff')
				// 提示
				this.drawFor(ctx, 'fillText', {
					x: screenWidth / 2,
					y: 90,
					con: '备考生友情提示',
					size: 15,
					align: 'center',
					blur: 10,
					color: 'rgba(0,0,0,.3)'
				})
				// 距高考
				this.drawFor(ctx, 'fillText', {
					x: screenWidth / 2,
					y: 132,
					con: '距高考：' + examDate,
					size: 18,
					color: '#fff',
					align: 'center',
					blur: 10,
					color: 'rgba(0,0,0,.3)'
				})
				// 天数
				this.drawFor(ctx, 'fillText', {
					x: screenWidth / 2,
					y: 288,
					con: countdown,
					size: 112,
					color: '#fff',
					align: 'center',
					blur: 10,
					color: 'rgba(0,0,0,.2)'
				})
				// 天
				this.drawFor(ctx, 'img', {
					x: screenWidth / 2 + 95,
					y: 190,
					w: 36,
					h: 23,
					con: '/static/image/motto-blue.png'
				})
				this.drawFor(ctx, 'fillText', {
					x: screenWidth / 2 + 112,
					y: 206,
					con: '天',
					size: 13,
					color: '#fff',
					align: 'center'
				})
				// 格言
				this.drawFor(ctx, 'img', {
					x: 30,
					y: 388,
					w: screenWidth - 60,
					h: 90,
					con: '/static/image/motto-gray.png'
				})
				this.drawTexts(ctx, motto, 50, 20, 398, 31)
				// 二维码
				this.drawFor(ctx, 'img', {
					x: screenWidth / 2 - 35,
					y: 520,
					w: 70,
					h: 70,
					con: this.code
				})
				this.drawFor(ctx, 'fillText', {
					x: screenWidth / 2,
					y: 610,
					con: '长按识别',
					size: 12,
					align: 'center',
					blur: 10,
					color: 'rgba(0,0,0,.3)'
				})
				ctx.draw()
			},
			// 循环画图
			drawFor(ctx, type, data) {
				ctx.save()
				if (type == 'img') { // 画图片
					ctx.drawImage(data.con, data.x, data.y, data.w, data.h)
				} else if (type == 'fillText') { // 画文字
					if (data.blur) {
						ctx.setShadow(0, 0, data.blur, data.color); //设置阴影
					}
					ctx.setFontSize(data.size)
					ctx.setTextAlign(data.align)
					ctx.fillText(data.con, data.x, data.y)
				}
				ctx.restore()
			},
			// 截取字符串
			drawTexts: function(ctx, str, leftWidth, initHeight, canvasTop) {
				ctx.save()
				ctx.setFontSize(13)
				const lineWidth = 26;
				let id = 0;
				if (str.length > lineWidth) {
					for (let i = 1; i < str.length; i++) {
						if (str.substring(id, i * lineWidth) && i < 4) {
							ctx.fillText(str.substring(id, i * lineWidth), leftWidth, canvasTop + initHeight *
								i); //绘制截取部分
							id = i * lineWidth
						}
					}
				} else {
					ctx.fillText(str, leftWidth, canvasTop + initHeight); //绘制截取部分
				}
				ctx.restore()
			},
			savePic() {
				const that = this
				if (this.bg && this.code) {
					wx.showLoading({
						title: '图片保存中',
						mask: true
					})
					wx.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: function(res) {
							wx.hideLoading()
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									wx.showToast({
										title: '已保存到相册',
										icon: 'success',
										duration: 3000
									})
								}
							})
						},
						fail: function(res) {
							wx.hideLoading()
							console.log(res);
						}
					}, this);
				} else {
					wx.showToast({
						title: '保存图片失败',
						icon: 'success',
						duration: 3000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* components/modal.wxss */

	.modal-layer,
	.layer {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		z-index: 1000
	}

	.layer {
		background: rgba(0, 0, 0, .5);
	}

	.share-modal {
		position: relative;
		margin-top: 140rpx;
		width: 630rpx;
		z-index: 2;
		border-radius: 16rpx;
		text-shadow: 2rpx 2rpx rgba(0, 0, 0, .2);
		z-index: 1001
	}

	.share-modal .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 630rpx;
		height: 948rpx;
		z-index: 0;
		border-radius: 16rpx;
		background-color: #30c377;
	}

	.share-modal .info {
		position: relative;
		padding: 30rpx 0 0;
		width: 630rpx;
		height: 948rpx;
	}

	.share-modal .share {
		padding: 0 30rpx;
		width: 630rpx;
		text-shadow: none
	}

	.share-modal .tit {
		color: #fff
	}

	.share-modal .date {
		margin-top: 30rpx;
	}

	.share-modal .day {
		margin-top: 50rpx;
		padding-left: 40rpx;
		height: 154rpx;
		line-height: 154rpx;
		font-size: 164rpx;
		text-shadow: 3rpx 4rpx rgba(0, 0, 0, .1)
	}

	.share-modal .day .text {
		padding: 0 17rpx;
		height: 30rpx;
		line-height: 30rpx;
		background-color: #FFBC44;
		border-radius: 4rpx;
	}

	.share-modal .surplus {
		margin-top: 30rpx;
	}

	.share-modal .content {
		margin: 80rpx 0 60rpx;
		padding: 30rpx;
		width: 570rpx;
		height: 178rpx;
		line-height: 38rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 8rpx;
	}

	.share-modal .signature {
		height: 106rpx;
		overflow: hidden;
		text-shadow: none
	}

	.share-modal .name {
		text-align: right;
	}

	.share-modal .code {
		width: 98rpx;
		height: 98rpx;
	}

	.share-modal .bks-c-ziyuan34cha {
		margin-top: 60rpx;
	}
</style>